<template>
    <div class="my-custom-wrap">
      <div>
        <div class="my-custom" v-if="list.length">
          <ul class="flex custom-type">
            <li v-for="item in list" :class="{'active': item.status}" @click="switchTag(item)">{{item.name}}</li>
          </ul>
          <ul class="custom-list clearfix" v-for="item in list" v-show="item.status">
            <li v-for="child in item.list" @click="cancel(child)">
              <p class="img-box">
                <img :src="child.logo" alt="">
              </p>
              <div class="list-msg">
                <p>{{child.desc[0]}}</p>
                <p>{{child.desc[1]}}</p>
                <p>{{child.desc[2]}}</p>
              </div>
              <span class="close" v-show="child.checked"></span>
            </li>
          </ul>
        </div>
        <p v-else class="not-data text-center">对不起您暂未定制话题，请前往话题<router-link :to="{name:'addCustomTopic'}">新增定制</router-link></p>
      </div>
    </div>
</template>

<script>
  import request from '../../../api/request'
  export default {
    name: 'my-coustom',
    data () {
      return {
        list: [],
        request: true
      }
    },
    created () {
      request.post('getCustomStatus').then((response) => {
        if (response.data.code === '200') {
          let arr = []
          response.data.data.keywords.forEach((item, index) => {
            index ? (item.status = false) : (item.status = true)
            item.list.forEach((child) => {
              child.checked = 1
            })
            arr.push(item)
          })
          this.list = arr
        }
      })
    },
    methods: {
      switchTag (data) {
        this.list.forEach((item) => {
          item.status = false
        })
        data.status = true
      },
      cancel (data) {
        if (this.request) {
          this.request = false
          request.post('submitSubscribe', { 'keyword_id': data.keyword_id, 'do': data.checked }).then((response) => {
            if (response.data.code === '200') {
              this.request = true
              if (data.checked === 1) {
                data.checked = 0
              } else {
                data.checked = 1
              }
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .custom-wrap{
    .my-custom-wrap{
      >div{
        padding-top:30px;
      }
      .custom-list{
        margin-top:10px;
        li{
          float: left;
          width:260px;
          cursor: pointer;
          border-right: 1px solid #eaeef3;
          margin: 10px 5px 10px 0;
          position: relative;
          &:nth-child(4n){
            margin-right:0;
            border-right: none;
          }
          &:hover{
            background-color: #f5f5f5;
          }
        }
        .close{
          display: block;
          position: absolute;
          width: 30px;
          height: 30px;
          top:0;
          right:0;
          background-image: url(../../assets/images/custom-close.png);
          background-size: contain;

        }
        .img-box{
          width:50px;
          height: 50px;
          overflow: hidden;
          float: left;
          border-radius: 5px;
          img{
            width:50px;
          }
        }
        .list-msg{
          float: left;
          width:185px;
          padding-left:8px;
          p{
            font-size: 12px;
            color: #727a84;
            width:100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom:2px;
            &:first-child{
              font-size: 14px;
              color: #33383e;
            }
          }
        }
      }
    }
    .my-custom{
      border: 1px solid #eaeef3;
      margin:0 30px;
      padding:8px;
    }
    .custom-type{
      margin-top:20px;
      border-bottom: 5px solid #eaeef3;
      li{
        font-size: 18px;
        color: #33383e;
        width:90px;
        text-align: center;
        cursor: pointer;
        padding-bottom: 14px;
        position: relative;
        &.active{
          color:#00ba91;
          &:after{
            content:'';
            display: block;
            width:100%;
            height: 5px;
            position: absolute;
            left:0;
            bottom:-5px;
            background-color: #00ba91;
          }
        }
      }
    }
  }
</style>
